<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transformations</title>
  </head>
  <body>
    <!-- 
      transform:
        可选值：
        - translate: 平移。translate(x,y)，若 y 未指定，则为 0
        - scale: 缩放 scale(x,y)，若 y 未指定，则等于 x
        - rotate: 旋转 rotate(deg,x,y)，若 x,y 未指定，则为 0,0
        - SkewX: 倾斜 x skewX(a)，沿 x 轴倾斜 a 度
        - SkewY: 倾斜 x skewY(a)，沿 y 轴倾斜 a 度
        - matrix: 矩阵变换 matrix(a,b,c,d,e,f)
    -->
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />
      <rect x="0" y="0" width="50" height="50" fill="blue" />
      <rect
        x="50"
        y="0"
        width="50"
        height="50"
        fill="green"
        transform="translate(10, 10)"
      />
    </svg>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />
      <rect x="0" y="0" width="50" height="50" fill="blue" />
      <rect
        x="80"
        y="0"
        width="50"
        height="50"
        fill="green"
        transform="scale(1, 0.8)"
      />
    </svg>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />
      <rect x="0" y="0" width="50" height="50" fill="blue" />
      <rect
        x="80"
        y="0"
        width="50"
        height="50"
        fill="green"
        transform="rotate(45, 105, 25)"
      />
    </svg>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />

      <rect
        x="0"
        y="0"
        width="50"
        height="50"
        fill="blue"
        transform="skewY(45)"
      />
      <rect
        x="80"
        y="0"
        width="50"
        height="50"
        fill="green"
        transform="skewX(45)"
      />
    </svg>
    <svg
      height="300"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />

      <rect x="0" y="0" width="50" height="50" fill="blue" />
      <rect
        x="0"
        y="0"
        width="50"
        height="50"
        fill="green"
        transform="matrix(3, 2, 0, 1, 50, 10)"
      />
      <rect x="50" y="10" width="2" height="2" fill="black" />
      <rect x="200" y="110" width="2" height="2" fill="black" />
      <rect x="50" y="60" width="2" height="2" fill="black" />
      <rect x="200" y="160" width="2" height="2" fill="black" />

      <!-- 
        变换公式
        newX = a*oldX + c*oldY + e
        newY = b*oldX + d*oldY + f
       -->

      <!-- 左上角： 0 0
      x: 3 * 0 + 0 * 0 + 50 = 50
      y: 2 * 0 + 1 * 0 + 10 = 10

      右上角： 50 0
      x: 3 * 50 + 0 * 0 + 50 = 200
      y: 2 * 50 + 1 * 0 + 10 = 110

      左下角 0 50
      x: 3 * 0 + 0 * 50 + 50 = 50
      y: 2 * 0 + 1 * 50 + 10 = 60

      右下角 50 50
      x: 3 * 50 + 0 * 50 + 50 = 200
      y: 2 * 50 + 1 * 50 + 10 = 160 -->
    </svg>
  </body>
</html>
